<script setup>
    import { getUserOrderAPI } from '@/network/order';
    import { onMounted, ref } from 'vue';
    // tab列表
    const tabTypes = [
        { name: "all", label: "全部订单" },
        { name: "unpay", label: "待付款" },
        { name: "deliver", label: "待发货" },
        { name: "receive", label: "待收货" },
        { name: "comment", label: "待评价" },
        { name: "complete", label: "已完成" },
        { name: "cancel", label: "已取消" }
    ]

    // 获取订单列表
    const userOrder = ref([])
    const params = ref({
        orderState: 0, // tab切换状态
        page: 1,
        pageSize: 2
    })
    const total = ref(0)
   async function getUserOrder() {
        const res = await getUserOrderAPI(params.value)
        console.log(res);
        userOrder.value = res.result.items
        total.value = res.result.counts
    }

    onMounted(() => {
        getUserOrder()
    })

    // tab切换请求不同数据
    function tabChange(state) {
        console.log(state);
        params.value.orderState = state
        getUserOrder()
    }

    // 切换分页，请求数据
    function pageChange(page) {
        console.log(page);
        params.value.page = page
        getUserOrder()
    }
</script>


<template>
    <div class="order-container">
        <el-tabs @tab-change="tabChange">
            <el-tab-pane v-for="item in tabTypes" :key="item.name" :label="item.label"></el-tab-pane>
            <div class="main-container">
                <div class="holder-container" v-if="userOrder.length === 0">
                    <el-empty description="暂无订单数据" />
                </div>
                <div class="order-item" v-for="order in userOrder" :key="order.id">
                    <div class="head">
                        <span>下单时间：{{order.createTime}}</span>
                        <span>订单编号：{{order.id}}</span>
                    </div>
                    <div class="body">
                        <ul class="column goods">
                            <li  v-for="item in order.skus" :key="item.id">
                                <a href="javascript:;">
                                    <img :src="item.image" alt="">
                                </a>
                                <div class="info">
                                    <p class="name ellipsis-2">{{item.name}}</p>
                                    <p class="attr ellipsis">{{item.attrsText}} </p>
                                </div>
                                <div class="price">¥{{item.realPay.toFixed(2)}}</div>
                                <div class="count">x{{item.quantity}}</div>
                            </li>
                        </ul>
                        
                        <div class="column state">
                            <p>待发货</p>
                        </div>
                        <div class="column amount">
                            <p class="red">¥{{order.payMoney.toFixed(2)}}</p>
                            <p>（含运费：¥{{order.postFee.toFixed(2)}}）</p>
                            <p>在线支付</p>
                        </div>
                        <div class="column action">
                            <el-button type="primary" size="small">立即付款</el-button>
                            <p>查看详情</p>
                            <p>再次购买</p>
                        </div>
                    </div>
                </div>
                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination :total="total" :page-size="params.pageSize"
                    @current-change="pageChange" background layout="prev, pager, next, total"></el-pagination>
                    
                </div>
            </div>
        </el-tabs>
        
    </div>
</template>


<style scoped lang='scss'>
    .order-container{
        padding: 10px 20px;
        .main-container{
            // min-height: 500px;
            margin-bottom: 20px;
            .order-item{
                margin-bottom: 20px;
                border: 1px solid #f5f5f5;
                .head{
                    height: 50px;
                    line-height: 50px;
                    background: #f5f5f5;
                    padding: 0 20px;
                    span{
                        margin-right: 20px;
                    }
                }
                .body{
                    display: flex;
                    text-align: center;
                    padding-top: 20px;
                    .column{
                        border-left: 1px solid #f5f5f5;
                        // padding: 20px;
                        &:first-child{
                            border-left: none;
                        }
                        &>p{
                            padding-top: 10px;
                        }
                    }
                    .goods{
                        display: flex;
                        flex: 1;
                        // padding: 0px;
                        // margin-left: 10px;
                        flex-wrap: wrap;
                        li{
                            display: flex;
                            flex: 1;
                            padding: 10px;
                            border-bottom: 1px solid #f5f5f5;
                            &:last-child{
                                border-bottom: none;
                            }
                            a{
                                display: block;
                                width: 70px;
                                height: 70px;
                                border: 1px solid #f5f5f5;
                                img{
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .info{
                                width: 220px;
                                text-align: left;
                                padding: 0 10px;
                                .name{
                                    margin-bottom: 5px;
                                }
                                .attr{
                                    font-size: 12px;
                                    color: #999;
                                }
                            }
                            .price{
                                width: 100px;
                            }
                            .count{
                                width: 80px;
                            }
                        }
                        
                    }
                    .state{
                        width: 120px;
                    }

                    .amount{
                        width: 200px;
                        .red{
                            color: $priceColor;
                        }
                    }

                    .action{
                        width: 140px;
                    }
                }
            }
            .pagination-container{
                display: flex;
                justify-content: center;
            }
        }
    }
</style>